//1. 引入vue和vuex
import Vue from "vue";
import Vuex from "vuex";

//2. 使用vuex插件
Vue.use(Vuex);

//3.实例化一个vuex仓库，并暴露。
//4. 给仓库传入配置(state mutations actions getters modules)。
export default new Vuex.Store({
  state: {
    count: 0,
    num: 0,
  },
  /*
   * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
   * Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
   * mutations函数会接受 state 作为第一个参数。
   */
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    //你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload），在mutations方法中第二个参数接受。
    incrementN(state, payload) {
      state.count += payload.n;
    },
    incrementWait(state) {
      //mutation 中的异步函数中的回调无法让工具devtools监听到：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可被vue的devTools追踪的。
      setTimeout(() => {
        state.count++;
      }, 2000);
    },
  },
  actions: {},
  getters: {},
});
